/*遮罩效果*/
.loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

/* 正向流动效果 */
.svg_ani_flow {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ani_flow 10s linear infinite;
    animation-fill-mode: forwards;
    -webkit-animation: ani_flow 10s linear infinite;
    -webkit-animation-fill-mode: forwards;
}

@keyframes ani_flow {
    from {
        stroke-dasharray: 10, 5;
    }

    to {
        stroke-dasharray: 13, 5;
    }
}

@-webkit-keyframes ani_flow {
    from {
        stroke-dasharray: 10, 5;
    }

    to {
        stroke-dasharray: 13, 5;
    }
}


/* 停止流动效果 */

.svg_ani_flow_stop {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ani_flow_stop 10s linear infinite;
    animation-fill-mode: forwards;
    -webkit-animation: ani_flow_stop 10s linear infinite;
    -webkit-animation-fill-mode: forwards;
}

@keyframes ani_flow_stop {
    from {
        stroke-dasharray: 10, 5;
    }

    to {
        stroke-dasharray: 10, 5;
    }
}

@-webkit-keyframes ani_flow_stop {
    from {
        stroke-dasharray: 10, 5;
    }

    to {
        stroke-dasharray: 10, 5;
    }
}


/* 反向流动效果 */

.svg_ani_flow_back {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ani_flow_back 10s linear infinite;
    animation-fill-mode: forwards;
    -webkit-animation: ani_flow_back 10s linear infinite;
    -webkit-animation-fill-mode: forwards;
}

@keyframes ani_flow_back {
    from {
        stroke-dasharray: 13, 5;
    }

    to {
        stroke-dasharray: 10, 5;
    }
}

@-webkit-keyframes ani_flow_stop {
    from {
        stroke-dasharray: 10, 5;
    }

    to {
        stroke-dasharray: 10, 5;
    }
}


/* 以最大40高度填充 */

.svg_ani_fill_h40 {
    animation: ani_fill_h40 5s linear infinite;
    animation-fill-mode: forwards;
    -webkit-animation: ani_fill_h40 5s linear infinite;
    -webkit-animation-fill-mode: forwards;
}

@keyframes ani_fill_h40 {
    from {
        height: 0px;
    }

    to {
        height: 40px;
    }
}

@-webkit-keyframes ani_flow_stop {
    from {
        stroke-dasharray: 10, 5;
    }

    to {
        stroke-dasharray: 10, 5;
    }
}


/* 图形统一旋转动画 */

.svg_rotate_360 {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: rotate_360 2s linear infinite;
    animation-fill-mode: forwards;
    -webkit-animation: rotate_360 2s linear infinite;
    -webkit-animation-fill-mode: forwards;
}

.svg_rotate_360_reverse {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: rotate_360 2s linear infinite;
    animation-fill-mode: forwards;
    animation-direction: reverse;
    -webkit-animation: rotate_360 2s linear infinite;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-direction: reverse;
}

@keyframes rotate_360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate_360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* 皮带颜色动画 */

.transColor {
    animation: pd_color 2s linear infinite;
    -webkit-animation: pd_color 2s linear infinite;
}

.transColor1 {
    animation: pd_color1 2s linear infinite;
    -webkit-animation: pd_color1 2s linear infinite;
}

@keyframes pd_color {
    0% {
        fill: #00fffc;
        opacity: 1;
    }

    50% {
        fill: #3d8bf6;
        opacity: 0.2;
    }

    100% {
        fill: #00fffc;
        opacity: 1;
    }
}

@-webkit-keyframes pd_color {
    0% {
        fill: #00fffc;
        opacity: 1;
    }

    50% {
        fill: #3d8bf6;
        opacity: 0.2;
    }

    100% {
        fill: #00fffc;
        opacity: 1;
    }
}

@keyframes pd_colo1 {
    0% {
        fill: #3d8bf6;
        opacity: 0.2;
    }

    50% {
        fill: #00fffc;
        opacity: 1;
    }

    100% {
        fill: #3d8bf6;
        opacity: 0.2;
    }
}

@-webkit-keyframes pd_color1 {
    0% {
        fill: #3d8bf6;
        opacity: 0.2;
    }

    50% {
        fill: #00fffc;
        opacity: 1;
    }

    100% {
        fill: #3d8bf6;
        opacity: 0.2;
    }
}


/* 煤炭顺煤流动画 */

.clock_mt {
    animation-fill-mode: forwards;
    animation: clock_animation 6s linear infinite;
    -webkit-animation: clock_animation 6s linear infinite;
}

@keyframes clock_animation {
    to {
        transform: translate(6000px, 70px)
    }
}

.clock_mt1 {
    animation-fill-mode: forwards;
    animation: clock_animation1 3s linear 1;
    -webkit-animation: clock_animation1 3s linear 1;
}

.clock_mt2 {
    animation: hhh 3s linear 1;
    animation-fill-mode: forwards;
    -webkit-animation: hhh 3s linear 1;
}

@keyframes clock_animation1 {
    100% {
        transform: translate(3400px, 30px)
    }
}

@keyframes hhh {
    100% {
        transform: translate(1000px, 1000px)
    }
}


/* 图形统一位移动画 */

.svg_translate_x_20 {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: translate_x_20 1s linear infinite;
    -webkit-animation: translate_x_20 1s linear infinite;
}

@keyframes translate_x_20 {
    to {
        transform: translate(20)
    }
}

@-webkit-keyframes translate_x_20 {
    to {
        transform: translate(20)
    }
}

.pointer {
    cursor: pointer;
}